<template>
    <el-row :gutter="20">
        <el-col :sm="24">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <h5>色彩模式</h5>
                    </div>
                </template>
                <el-radio-group v-model="windowStore.colorMode">
                    <el-radio value="dark" size="large">浅色</el-radio>
                    <el-radio value="light" size="large">深色</el-radio>
                </el-radio-group>
            </el-card>
        </el-col>
    </el-row>
</template>
<script>
    import { watch, onMounted } from 'vue';
    import { useWindowStore } from '/src/stores/windowStore';
    import { ipcRenderer } from 'electron';
    export default {
        setup() {
            const windowStore = useWindowStore();
            watch(
                () => windowStore.colorMode,
                async (newVal) => {
                    try {
                        console.log(`更新系统主题为: ${newVal}`);
                        const result = await ipcRenderer.invoke('update-dark-mode:web');

                        console.log(`IPC 返回结果: ${result}_${windowStore.colorMode}`);
                    } catch (error) {
                        console.error('调用 update-dark-mode:web 失败:', error);
                    }
                }
            );
            return { windowStore };
        }
    };
</script>
<style scoped>
    .el-row {
        margin-top: 10px;
    }

    .card-header h5 {
        margin: 0;
    }

    .card-refresh-btn {
        float: right;
        margin-top: -25px;
        cursor: pointer;
    }
</style>